<template>
  <div class="member-box">
    <div id="member">
      <div class="member-info">党员信息</div>
      <div class="container">
        <div class="member-left">
          <div
            id="echarts"
            ref="chartContainer"
            style="width: 150px; height: 150px;"
          ></div>
        </div>
        <div class="member-right">
          <div class="member-right-left">
            <div class="member-line">
              <div id="round">
                <div></div>
              </div>
              <span>党员</span>
            </div>
            <div class="member-line">
              <div id="round" :style="{ backgroundColor: '#91cc75' }">
                <div></div>
              </div>
              <span>会员</span>
            </div>
          </div>
          <div class="member-right-right">
            <div>
              <!-- 当你访问一个为定义的属性的时候就会报错，我们可以通过v-if来判断是否有这个属性，如果有这个属性就渲染如果没有这个属性就不渲染 -->
              <div class="member-number" v-if="memberNum[0]" @click="open1">
                {{ memberNum[0].value }}
              </div>
              <div class="member-text">党员</div>
            </div>
            <div>
              <div class="member-number" v-if="memberNum[1]" @click="open2">
                {{ memberNum[1].value }}
              </div>
              <div class="member-text">会员</div>
            </div>
            <!-- 弹框 -->
            <Bigscreen :openBigscreendialog="opendemand1" isPartyMember="1" @changeBigscreen="opendemandval1"></Bigscreen>
            <Bigscreen :openBigscreendialog="opendemand2"  @changeBigscreen="opendemandval2"></Bigscreen>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/dist/echarts";
import "echarts/dist/echarts.min.js"; // 引入新版本的 ECharts
import { mapState } from "vuex";
import Bigscreen from '@/views/bigscreenprop/bigscreenprop.vue'
export default {
  name: "",
  components: { Bigscreen },
  props: {
    typeChart: {
      type: String,
      default: "pie",
    },
  },
  data() {
    return {
      opendemand1: false,
      opendemand2: false,
    };
  },

  mounted() {
    // this.getMemberNumlist();
    setTimeout(() => {
      this.renderChart();
    }, 1000);
  },
  computed: {
    ...mapState({
      memberNum: (state) => {
        return state.bigscreen.menmberNum;
      },
      // memberNum: state => state.bigscreen.memberNum,
    }),
  },
  methods: {
    open1() {
      this.opendemand1 = true;
    },
    open2() {
      this.opendemand2 = true;
    },
    opendemandval1(val){
      this.opendemand1 = val;
    },
    opendemandval2(val){
      this.opendemand2 = val;
    },
    renderChart() {
      const chartContainer = this.$refs.chartContainer;
      const chart = echarts.init(chartContainer);
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [ {
            name: "Access From",
            type: this.typeChart,
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            // data: [{ value: 48 }, { value: 735 }],
            data: this.memberNum,
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
// 设置变量颜色
$color-blue: #0d3d7f;
$font-color: #09f5fc;
$text-color: #fff;
.member-box {
  height: 100%;
  // background-color: red;
  #member {
    height: 100%;
    //  margin: 10px auto;
    padding: 15px 10px;
    //  background-color: $color-blue;

    & > .member-info {
      color: $font-color;
      // font-size: 12px;
      // padding: 10px 10px;
    }
    .container {
    height: 100%;
    display: flex;
    // flex-direction: row;
     justify-content: space-around;
       .member-left {
           display: flex;
        align-items: center;
    }
    .member-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .member-right-left {
        margin-right: 20px;
        .member-line {
          border-bottom: 1px solid darkgray;
          width: 115px;
          display: flex;
          flex-direction: row;
          padding: 10px;
          #round {
            background-color: #5470c6;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: relative;
            & > div {
              width: 6px;
              height: 6px;
              background-color: #1e1e1e;
              margin: auto;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              position: absolute;
              border-radius: 50%;
            }
          }
          & > span {
            font-size: 12px;
            color: $text-color;
            margin-left: 10px;
          }
        }
      }
      .member-right-right {
        display: flex;
        justify-content: space-between;
        // margin-left: 130px;
        & > div {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .member-number {
          padding: 5px;
          border: #09f5fc solid 1px;
          margin: 0 10px;
          color: $text-color;
        }
        .member-text {
          font-size: 12px;
          color: $text-color;
        }
      }
    }
    }

  }
}
</style>
